<template>
	<view>
		<view class="cu-custom" :style="[{height:headerHeight + 'px'}]">
			<view class="fixed"  :style="headerStyle"
				:class="[props.bgImage!=''?'none-bg text-white bg-img':'',props.bgColor]">
				<view class="cu-bar  search">
					<view @click="handleLocationShop" class="action">
						<text>{{setting.community.name||'选择社区'}}</text>
						<text class="cuIcon-triangledownfill"></text>
					</view>
					<view @click="handleClick" class="search-form round">
						<text class="cuIcon-search"></text>
						<input @focus="InputFocus" :disabled="true" @blur="InputBlur" :adjust-position="false" type="text"
							placeholder="搜索想要查找社区" confirm-type="search" />
					</view>
				</view>
				<view class="cu-bar search">
					<scroll-view scroll-x class=" nav text-center">
						<view v-for="(item,index) in tabList" :key="index" class="cu-item" :class="item.value==TabCur?'text-white cur':''" @tap="tabSelect" :data-id="item.value">
							{{item.label}}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		watch,
		computed,
		ref
	} from "vue";
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		bgColor: {
			type: String,
			default: ''
		},
		isBack: {
			type: [Boolean, String],
			default: false
		},
		bgImage: {
			type: String,
			default: ''
		}
	})
	const tabList=ref([{
		label:"首页",
		value:0
	},{
		label:"新闻",
		value:1
	},{
		label:"视频",
		value:2
	},{
		label:"拼团",
		value:3
	},{
		label:"活动",
		value:4
	}])
	const TabCur = ref(0);
	const scrollLeft = ref(0);
	const tabSelect = (e : any) => {
		TabCur.value = e.currentTarget.dataset.id;
		scrollLeft.value = (e.currentTarget.dataset.id - 1) * 60;
		emit('action',TabCur.value);
	}
	const handleLocationShop = () => {
		uni.navigateTo({
			url: '/views/other/bindshop'
		});
	};
	const handleClick = () => {
		uni.navigateTo({
			url: '/pages/canteen/search'
		});
	};
	const headerHeight=ref(100)
	const headerStyle = computed(() => {
		var StatusBar = setting.StatusBar;
		headerHeight.value = setting.CustomBar*2-StatusBar;
		var bgImage = props.bgImage;
		var style = `height:${headerHeight.value}px;padding-top:${StatusBar}px;`;
		if (props.bgImage) {
			style = `${style}background-image:url(${bgImage});`;
		}
		return style;
	})
	const InputBottom = ref(0)
	const InputFocus = (e : any) => {
		InputBottom.value = e.detail.height
	}
	const InputBlur = (e : any) => {
		InputBottom.value = 0
	}
	const handleBackPage = (res) => {
		if (props.isBack) {
			uni.navigateBack({
				delta: 1
			});
		} else {
			emit('action')
		}
	}
</script>

<style>

</style>